<template>
	<view class="body p40" style="background-image: url(/static/image/bg.jpg);">
		<picker class="picker mb20 p20" mode="selector" :range="arr" @change="setArr">
			<view class="d-s-c">
				<text class="f34 fb mr10">{{data.arr[data.aIndex]}}</text>
				<up-icon size="8" color="#000" name="arrow-down-fill"></up-icon>
			</view>
		</picker>
		<up-search bgColor="#fff" :showAction="false" shape="round" placeholder="搜索任务组件"
			v-model="data.keyword"></up-search>
		<view class="menu d-b-c pt40 pb20">
			<view class="item tc" @click="setAct(index)" :class="data.active==index?'active tb':''"
				v-for="(item,index) in data.menu" :key="index">
				<view class="color-72 f32">{{item.name}}</view>
				<view class="f28 mt10">({{item.num}})</view>
			</view>
		</view>
		<view class="list mt40" v-if="data.list.length>0">
			<view @click="store.commit('jump','/pages/task/detail')" class="item mb40 d-b-s p30 br12 bg-white" v-for="(item,index) in data.list" :key="index">
				<view class="content flex-1 mr20">
					<view class="f34 fb vertical">{{item.title}}</view>
					<view class="d-b-c mt10 ww100 sub f28">
						<text>截止时间: {{item.jiezhi}}</text>
						<text>创建时间: {{item.addtiem}}</text>
					</view>
					<view class="sub f28 mt10">负责人: {{item.name}}</view>
					<view class="sub f28 mt10">绩效点: {{item.num}}</view>
				</view>
				<up-icon name="edit-pen" size="22" color="#999"></up-icon>
			</view>
			<up-loadmore :status="data.status" marginTop="20" line></up-loadmore>
		</view>
		<up-empty marginTop="20vh" v-else mode="list" text="暂无列表"></up-empty>
		<view class="pos br-50 p10" @click="store.commit('jump','/pages/task/add')">
			<up-icon name="plus" bold size='20' color='#fff'></up-icon>
		</view>
	</view>
</template>
<script setup>
	import { reactive } from 'vue'
	import { onLoad } from "@dcloudio/uni-app";
	import { useStore } from "vuex"
	import { test } from '@/uni_modules/uview-plus';
	const store = useStore()
	const data = reactive({
		arr: ['庆余电力有限公司'],
		aIndex: 0,
		active: 0,
		checked: false,
		status: "loadmore",
		menu: [{
			name: "全部任务",
			num: 2
		}, {
			name: "我发出的",
			num: 0
		}, {
			name: "我负责的",
			num: 1
		}],
		list: [{
			title: "8月10号整理会议记录+分发各个部门",
			jiezhi: "今天",
			addtiem: "8月5号",
			name: "白马王子",
			num: 0
		}, {
			title: "8月10号整理会议记录+分发各个部门",
			jiezhi: "今天",
			addtiem: "8月5号",
			name: "白马王子",
			num: 0
		}, {
			title: "8月10号整理会议记录+分发各个部门",
			jiezhi: "今天",
			addtiem: "8月5号",
			name: "白马王子",
			num: 0
		}]
	})

	function setAct(i) {
		data.active = i
	}
</script>
<style scoped lang="scss">
	.list {
		.item {
			box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
			border-left: 6px solid;

			&:nth-child(2n) {
				border-color: #fbde03;
			}

			&:nth-child(2n-1) {
				border-color: #816dd7;
			}
		}
	}

	.active {
		position: relative;

		&:before {
			content: "";
			position: absolute;
			bottom: -20rpx;
			left: 50%;
			transform: translateX(-50%);
			background: #000;
			width: 2em;
			height: 3px;
		}

		view {
			color: #000;
		}
	}

	.body {
		position: relative;

		.pos {
			position: fixed;
			background-color: #009dfe;
			right: 40rpx;
			bottom: 40rpx;
		}
	}
</style>